<template>
  <boss-view>
    <div slot="content" class="operateData">
      <!-- 入驻商家 / 孵化企业 / 云仓仓库 / 新零售门店 / 物流站点 -->
      <div class="top">
        <!-- 入住商家 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <i class="bossVersion">&#xe60f;</i>
            <p class="title">入驻商家</p>
            <p class="num">
              <span>{{totalData.admission}}</span>
              <i class="units">家</i>
            </p>
          </div>
        </view-item>

        <!-- 孵化企业 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <i class="bossVersion">&#xe60d;</i>
            <p class="title">孵化企业</p>
            <p class="num">
              <span>{{totalData.hatch}}</span>
              <i class="units">家</i>
            </p>
          </div>
        </view-item>

        <!-- 云仓仓库 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <i class="bossVersion">&#xe60e;</i>
            <p class="title">云仓仓库</p>
            <p class="num">
              <span>
                {{totalData.build}}
                <!-- <i>.74</i> -->
              </span>
              <i class="units">㎡</i>
            </p>
          </div>
        </view-item>

        <!-- 新零售门店 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <i class="bossVersion">&#xe608;</i>
            <p class="title">新零售门店</p>
            <p class="num">
              <span>{{totalData.newRetailStore}}</span>
              <i class="units">个</i>
            </p>
          </div>
        </view-item>

        <!-- 物流站点 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <i class="bossVersion">&#xe610;</i>
            <p class="title">物流站点</p>
            <p class="num">
              <span>{{totalData.logisticsSite}}</span>
              <i class="units">个</i>
            </p>
          </div>
        </view-item>
      </div>
      <!-- 仓库使用 / 各子公司销售情况 / 云仓出入库 -->
      <div class="cen">
        <!-- 仓库使用 -->
        <view-chart-item>
          <div slot="chartData">
            <main-title>
              <span slot="txt" class="txt">仓库使用</span>
            </main-title>
            <pie-chart
              v-model="storageAreaArr"
              :option="storageAreaOption"
              :chartStyle="'min-height:255px'"
            ></pie-chart>
          </div>
        </view-chart-item>

        <!-- 各子公司销售情况 -->
        <view-chart-item>
          <div slot="chartData">
            <main-title>
              <span slot="txt" class="txt">各子公司销售情况</span>
            </main-title>
            <div class="chartTips">单位:万元</div>
            <bar-chart
              v-model="eachCompanyArr"
              :option="eachCompanyOption"
              :chartStyle="'min-height:255px;'"
            ></bar-chart>
          </div>
        </view-chart-item>

        <!-- 云仓出入库 -->
        <view-chart-item>
          <div slot="chartData">
            <main-title>
              <span slot="txt" class="txt">云仓出入库</span>
            </main-title>
            <div class="chartTips">单位:万件</div>
            <line-chartss
              v-model="accessArr"
              :chartStyle="'min-height:255px;'"
              :option="lineChartOption"
            ></line-chartss>
          </div>
        </view-chart-item>
      </div>
      <!-- 电商贸易采购总价 / 成交额趋势 / 电商贸易库存总价 -->
      <div class="bot">
        <view-inside-item>
          <div slot="insideData" class="insideData">
            <!-- 电商贸易采购总价 -->
            <div class="insideData_item">
              <main-title>
                <span slot="txt" class="txt">电商贸易采购总价</span>
              </main-title>
              <div class="chartTips">单位:万元</div>
              <bar-charts
                slot="main"
                v-model="purchasePriceArr"
                :option="purchasePriceOption"
                :chartStyle="'min-height:255px;'"
              ></bar-charts>
            </div>

            <em></em>
            <!-- 成交额趋势 -->
            <div class="insideData_item">
              <main-title>
                <span slot="txt" class="txt">成交额趋势</span>
              </main-title>
              <div class="chartTips" style="top: 42px;">单位:万元</div>
              <line-chartss
                v-model="turnoverArr"
                :chartStyle="'min-height:255px;'"
                :option="lineChartOption"
              ></line-chartss>
            </div>
            <em></em>

            <!-- 电商贸易库存总价 -->
            <div class="insideData_item">
              <main-title>
                <span slot="txt" class="txt">电商贸易库存总价</span>
              </main-title>
              <div class="chartTips">单位:万元</div>
              <bar-charts
                slot="main"
                v-model="stockPriceArr"
                :option="stockPriceOption"
                :chartStyle="'min-height:255px;'"
              ></bar-charts>
            </div>
          </div>
        </view-inside-item>
      </div>
    </div>
  </boss-view>
</template>

<script>
import lineChartss from "@/components/Charts/lineChartssSmooth";
import viewInsideItem from "@/components/bossVersion/viewInsideItem";
import mainTitle from "@/components/bossVersion/mainTitle";
import viewChartItem from "@/components/bossVersion/viewChartItem";
import barCharts from "@/components/Charts/barCharts";
import viewItem from "@/components/bossVersion/viewItem";
import bossView from "@/components/bossVersion/bossView";
import pieChart from "@/components/Charts/pieChart";
import barChart from "@/components/Charts/barChart";
import {
  GetDataByTargetJL,
  GetOverallTurnoverTrend,
  GetIndustrialParkOperatingData
} from "@/api/cyy/IndustrialParkForJL";
import {
  GetDataByTarget,
  GetDoubleDetailList
} from "@/api/cyy/IndustrialParkForCloudStorehouse";
export default {
  components: {
    barChart,
    pieChart,
    barCharts,
    lineChartss,
    viewInsideItem,
    mainTitle,
    viewChartItem,
    viewItem,
    bossView
  },
  data() {
    return {
      totalData: {
        admission: 0,
        hatch: 0,
        employment: 0,
        park: 0,
        build: 0,
        parking: 0,
        incubator: 0,
        enterprise: 0,
        achievement: 0,
        newRetailStore: 0,
        logisticsSite: 0
      }, // 上部汇总数据
      eachCompanyArr: [], // 各子公司销售情况
      eachCompanyOption: {
        startColor: "#48e5ff",
        endColor: "#088ceb",
        exchange: true,
        grid: {
          height: 180,
          top: 60,
          left: "18%"
        },
        xAxis: {
          show: false
        },
        label: {
          show: true,
          formatter: "{c}"
        }
      },
      storageAreaArr: [], // 仓储面积使用
      storageAreaOption: {
        legendIndex: 1, // legend 需要显示的数据
        otherData: [],
        startAngle: 300,
        hidePieMargin: true,
        otherColor: ["#F0BD26", "#EB5A24"],
        otherRadius: [0, "50%"],
        otherPosion: "inside",
        otherFormatter: "{d}%",
        otherLabel: true,
        otherCenter: ["50%", "50%"],
        color: ["#28E787", "#00D1FF"],
        center: ["50%", "50%"],
        legend: {
          top: 0,
          right: "0",
          itemGap: 10,
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        showLabel: true, // 是否显示图标 的label
        showLine: true // 是否显示图标线 的label
      },
      purchasePriceArr: [], // 采购总价
      purchasePriceOption: {
        hidePieMargin: true,
        color: ["#28e787", "#ff7145"],
        legend: {
          top: 10,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          top: 60,
          left: "6%",
          height: 160
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        labelDefault: 1
        // startColor: ["#0071BC", "#29AAE1"],
        // endColor: ["#006837", "#22B473"]
      },
      stockPriceArr: [], // 库存总价
      stockPriceOption: {
        hidePieMargin: true,
        color: ["#f0bd26", "#48e5ff"],
        legend: {
          top: 10,
          right: "0%",
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        grid: {
          top: 60,
          left: "6%",
          height: 160
        },
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        labelDefault: 1
        // startColor: ["#0071BC", "#29AAE1"],
        // endColor: ["#006837", "#22B473"]
      },
      accessArr: [], // 出入库
      turnoverArr: [], // 成交额趋势
      lineChartOption: {
        dataZoom: [
          {
            show: false
          }
        ],
        toolTipTxtColor: "#48e5ff",
        grid: {
          width: "88%",
          height: 160,
          top: 60,
          left: "10%",
          right: "10%",
          bottom: "20%"
        },
        legendColor: "#48e5ff",
        legend: {
          top: 20,
          right: 0,
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        hideLineColor: true,
        showSymbol: "none",
        tooltip: {
          show: true,
          axisPointer: {
            type: "shadow",
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          }
        },
        showLabel: false,
        xAxis: {
          z: 10,
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            rotate: 0,
            inside: false,
            rich: {
              value: {
                color: "#48e5ff"
              }
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(47, 240, 210, 0.2)",
              type: "dashed"
            }
          },
          axisLabel: {
            color: "#48e5ff"
          }
        },
        color: ["#28e787", "#ff7145", "#48e5ff", "#f0bd26", "#ff3e9a"]
      }
    };
  },
  mounted() {
    this.setData();
    this.GetTotalData();
    this.GetEachCompanyArr();
    this.GetOtherData();
    this.GetAccessArr();
    this.GetTurnoverArr();
  },
  methods: {
    // 趋势
    async GetTurnoverArr() {
      try {
        var res = await GetOverallTurnoverTrend();
        if (res.data.code === "0") {
          res.data.result.forEach(element => {
            element.xData1 = this.$utils.formatterMonthFun(element.xData1);
          });
          this.$set(this, "turnoverArr", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 上面总数据
    async GetTotalData() {
      try {
        var res = await GetIndustrialParkOperatingData();
        if (res.data.code === "0") {
          this.$set(this, "totalData", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 各子公司销售情况
    async GetEachCompanyArr() {
      const p = {
        queryType: "38006"
      };
      try {
        var res = await GetDataByTargetJL(p);
        if (res.data.code === "0") {
          var newArrList = [];
          res.data.result.forEach(element => {
            newArrList.unshift(element);
          });
          this.$set(this, "eachCompanyArr", newArrList);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 各子公司销售情况
    async GetAccessArr() {
      const p = {
        startTime: this.$utils.formatterStartTime(),
        queryType: "32008",
        timeAccuracy: "4005"
      };
      try {
        var res = await GetDoubleDetailList(p);
        if (res.data.code === "0") {
          res.data.result.forEach(element => {
            element.xData1 = this.$utils.formatterMonthFun(element.xData1);
          });
          this.$set(this, "accessArr", res.data.result);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 仓库使用
    async GetOtherData() {
      const p = {
        queryType: "32001"
      };
      const parameter = {
        queryType: "32018"
      };

      var totalNmu = 0;
      var falseData = {
        name: "",
        value: 0
      };
      try {
        var res = await GetDataByTarget(p);
        var result = await GetDataByTarget(parameter);
        if (result.data.code === "0") {
          res.data.result.list.forEach(element => {
            if (element.name === "已使用库位") {
              totalNmu = element.value;
            }
          });
          var newArr = [
            {
              name: "跨境电商",
              value: res.data.result.total - totalNmu,
              itemObj: {
                value: res.data.result.total - totalNmu,
                name: "",
                label: {
                  show: false
                },
                tooltip: { show: false },
                itemStyle: {
                  normal: {
                    label: {
                      show: false
                    },
                    labelLine: {
                      show: false
                    },
                    color: "transparent",
                    borderColor: "transparent",
                    borderWidth: 0
                  }
                }
              }
            }
          ];
          result.data.result.list.forEach(item => {
            falseData = {
              name: item.name,
              value: Math.round(
                (item.value * totalNmu) / result.data.result.total
              )
            };
            newArr.unshift(falseData);
          });
          this.$set(this, "storageAreaArr", newArr);
          this.$set(this.storageAreaOption, "otherData", res.data.result.list);
        }
      } catch (e) {
        console.log(e);
      }
    },
    setData() {
      var stockPriceArr = [
        {
          name: "1月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 24, percent: null }
          ]
        },
        {
          name: "2月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 28, percent: null }
          ]
        },
        {
          name: "3月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 27, percent: null }
          ]
        },
        {
          name: "4月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 26, percent: null }
          ]
        },
        {
          name: "5月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 25, percent: null }
          ]
        },
        {
          name: "6月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 65, percent: null }
          ]
        },
        {
          name: "7月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 33, percent: null }
          ]
        },
        {
          name: "8月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 33, percent: null },
            { name: "外贸电商", value: 22, percent: null }
          ]
        },
        {
          name: "9月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 44, percent: null }
          ]
        },
        {
          name: "10月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 98, percent: null },
            { name: "外贸电商", value: 55, percent: null }
          ]
        },
        {
          name: "11月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 24, percent: null },
            { name: "外贸电商", value: 21, percent: null }
          ]
        },
        {
          name: "12月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 54, percent: null },
            { name: "外贸电商", value: 34, percent: null }
          ]
        }
      ];
      this.$set(this, "stockPriceArr", stockPriceArr);
      var purchasePriceArr = [
        {
          name: "1月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 24, percent: null }
          ]
        },
        {
          name: "2月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 28, percent: null }
          ]
        },
        {
          name: "3月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 27, percent: null }
          ]
        },
        {
          name: "4月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 26, percent: null }
          ]
        },
        {
          name: "5月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 25, percent: null }
          ]
        },
        {
          name: "6月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 65, percent: null }
          ]
        },
        {
          name: "7月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 33, percent: null }
          ]
        },
        {
          name: "8月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 33, percent: null },
            { name: "外贸电商", value: 22, percent: null }
          ]
        },
        {
          name: "9月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 44, percent: null },
            { name: "外贸电商", value: 44, percent: null }
          ]
        },
        {
          name: "10月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 98, percent: null },
            { name: "外贸电商", value: 55, percent: null }
          ]
        },
        {
          name: "11月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 24, percent: null },
            { name: "外贸电商", value: 21, percent: null }
          ]
        },
        {
          name: "12月",
          innerName: null,
          value: 0,
          percent: null,
          list: [
            { name: "内贸电商", value: 54, percent: null },
            { name: "外贸电商", value: 34, percent: null }
          ]
        }
      ];
      this.$set(this, "purchasePriceArr", purchasePriceArr);
      // var storageAreaArr = [
      //   {
      //     name: "传统仓",
      //     value: 120
      //   },
      //   {
      //     name: "电商仓储",
      //     value: 180
      //   },
      //   {
      //     name: "跨境电商",
      //     value: 200,
      //     itemObj: {
      //       value: 200,
      //       name: "",
      //       label: {
      //         show: false
      //       },
      //       tooltip: { show: false },
      //       itemStyle: {
      //         normal: {
      //           label: {
      //             show: false
      //           },
      //           labelLine: {
      //             show: false
      //           },
      //           color: "transparent",
      //           borderColor: "transparent",
      //           borderWidth: 0
      //         }
      //       }
      //     }
      //   }
      // ];
      // var storageAreaOhter = [
      //   {
      //     name: "已占用仓",
      //     value: 300
      //   },
      //   {
      //     name: "未占用仓",
      //     value: 200
      //   }
      // ];
      // this.$set(this, "storageAreaArr", storageAreaArr);
      // this.$set(this.storageAreaOption, "otherData", storageAreaOhter);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../../../styles/bossVersion/_basics";

.operateData {
  @include absoluteAllSides(94, 20, 20, 140, 1);

  //   入驻商家 / 孵化企业 / 云仓仓库 / 新零售门店 / 物流站点
  .top {
    @include flex;
    .item {
      width: 336px;
      height: 270px;
      padding: 82px 22px 75px;
      line-height: 1;
      .mainData {
        @include flexFdcXcen;
        .bossVersion {
          font-size: 30px;
        }
        .title {
          margin-top: 10px;
          margin-bottom: 12px;
          @include bold(20px);
        }
        .num {
          & > span {
            @include din(34px);
            & > i {
              font-size: 18px;
            }
          }
          & > .units {
            font-size: 16px;
          }
        }
      }

      &:nth-of-type(1) {
        color: $color3;
      }
      &:nth-of-type(2) {
        color: $color1;
      }
      &:nth-of-type(3) {
        color: $color5;
      }
      &:nth-of-type(4) {
        color: $color4;
      }
      &:nth-of-type(5) {
        color: $budget;
      }
    }
  }
  .cen {
    @include flex;
    margin-top: 20px;
    margin-bottom: 20px;
    .chartItem {
      position: relative;
      z-index: 1;
      width: 573px;
      height: 328px;
      .chartTips {
        @include absoluteTLSide(70, 22, 1);
      }
      .chart {
        margin-top: 20px;
      }
    }
  }
  .bot {
    .insideItem {
      width: 100%;
      height: 328px;
      .insideData {
        @include flexYcen;
        .insideData_item {
          position: relative;
          z-index: 1;
          width: calc(100% / 3 - 30px);
          .chartTips {
            @include absoluteTLSide(34, 0, 1);
          }
          .chart {
            margin-top: 20px;
          }
        }
        & > em {
          width: 1px;
          height: 270px;
          margin: 0 30px;
          background-color: $color9;
        }
      }
    }
  }
}
</style>
